<template>
  <div class="product-custom-detail publicdetails">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <div class="publicdetails-module">
          <div class="publicdetails-list" style="display: flex;margin-bottom: 18px;">
            <div class="public-text-list" style="width: 33.33%;">
              <div class="public-text-key">产品名称</div>
              <div class="public-text-value public-left">
                {{ detailInfo.productName||'-' }}
              </div>
            </div>
            <div class="public-text-list" style="width: 33.33%;">
              <div class="public-text-key">通信方式</div>
              <div class="public-text-value public-left">
                 {{ detailInfo.type||'-' }}
              </div>
            </div>
            <div class="public-text-list" style="width: 33.33%;">
              <div class="public-text-key">波特率</div>
              <div class="public-text-value public-left">
                 {{ detailInfo.baudRate||'-' }}
              </div>
            </div>
          </div>
          <div class="publicdetails-list" style="display: flex;margin-bottom: 18px;">
            <div class="public-text-list" style="width: 33.33%;">
              <div class="public-text-key">创建时间</div>
              <div class="public-text-value public-left">
                {{ detailInfo.updateTime||'-' }}
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="功能定义" name="second">
        <detailCustom v-if="activeName=='second'" :id="detailId"/>
      </el-tab-pane>
    </el-tabs>
    <el-icon
      size="24"
      @click="funClose"
      style="position: absolute; top: 24px; right: 24px"
    >
      <CircleClose />
    </el-icon>
  </div>
</template>
<script setup>
import { ref,onMounted } from "vue";
import detailCustom from "./component/detailCustom.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const detailInfo = ref({});
const activeName = ref("first");
const detailId = ref()
onMounted(() => {
  console.log(147,router.currentRoute.value.query);
  detailInfo.value = JSON.parse(router.currentRoute.value.query.detailInfo);
  detailId.value = detailInfo.value.id;
});
const funClose = () => {
  router.go(-1);
};
const handleClick = (tab, event) => {
  console.log(tab, event);
};
</script>
<style lang="scss">
.product-custom-detail {
  height: calc(100vh - 88px);
  background-color: white;
  box-sizing: border-box;
  padding: 24px;
  margin: 16px;
  position: relative;
}
</style>
